
<!--- 新增模态框 -->
<div class="row" style="overflow:hidden;" id="Modals-add" style="/*display: none;*/">
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
        <div class="widget am-cf">
            <div class="widget-head am-cf">
                <div class="widget-title am-fl">新增用户</div>
                <div class="widget-function am-fr">
                    <a href="javascript:;" class="am-icon-cog"></a>
                </div>
            </div>
            <div class="widget-body am-fr">

                <form class="am-form tpl-form-border-form tpl-form-border-br" id="Modals-form" name="myform">

                    <div class="am-form-group">
                        <label for="user-name" class="am-u-sm-3 am-form-label">昵称<span
                                class="tpl-form-line-small-title">Name</span></label>
                        <div class="am-u-sm-9">
                            <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入新增用户昵称" name="name" onblur="checkName()">
                            <small id="utab">1-12个字符。</small>
                        </div>
                    </div>

                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">密码 <span
                                class="tpl-form-line-small-title">Pass</span></label>
                        <div class="am-u-sm-9">
                            <input type="password" placeholder="请输入密码" name="pass" onblur="checkPass()>
                            <small id="ptab"></small>
                        </div>
                    </div>


                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">确认密码 <span
                                class="tpl-form-line-small-title">RePass</span></label>
                        <div class="am-u-sm-9">
                            <input type="password" placeholder="请确认密码" name="repass" onblur="checkRepass()">
                            <small id="rptab"></small>
                        </div>
                    </div>

                    
                    <div class="am-form-group">
                        <label class="am-u-sm-3 am-form-label">手机 <span
                                class="tpl-form-line-small-title">Tel</span></label>
                        <div class="am-u-sm-9">
                            <input type="text" placeholder="请输入手机号" name="tel" onblur="checkTel()">
                            <small id="teltab"></small>
                        </div>
                    </div>


                    <div class="am-form-group">
                        <label for="user-intro" class="am-u-sm-3 am-form-label">激活/禁用</label>
                        <div class="am-u-sm-9">
                            <div class="tpl-switch">
                                <input type="checkbox" class="ios-switch bigswitch tpl-switch-btn" name="status">
                                <div class="tpl-switch-btn-view">
                                    <div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="am-form-group">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success "
                                    id="user-doCreate-submit" url="{:url('admin/user/doCreate')}" onmousedown="checkForm()">提交
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>     
    // 验证邮箱
    function checkTel() {
        var tel = document.myform.tel.value;
        var teltab = document.getElementById('teltab');
        if (tel.match(/^1[3|4|5|8|9]\d{9}$/) == null) {
            teltab.innerHTML = '* 手机格式不正确';
            teltab.style.color = '#f00';
            return false;
        } else {
            teltab.innerHTML = '* 通过验证';
            teltab.style.color = '#0a0';
            return true;
        }
    }

    // 验证用户名
    function checkName() {
        var user = document.myform.name.value;
        var utab = document.getElementById('utab');
        if (user.match(/^.{1,12}$/) == null) {
            utab.innerHTML = '* 用户名格式不正确';
            utab.style.color = '#f00';
            return false;
        } else {
            utab.innerHTML = '* 通过验证';
            utab.style.color = '#0a0';
            return true;
        }
    }

    // 验证密码
    function checkPass() {
        var pass = document.myform.pass.value;
        var ptab = document.getElementById('ptab');
        if (pass.length < 6 || pass.length > 18) {
            ptab.innerHTML = '* 密码长度不合法';
            ptab.style.color = '#f00';
            return false;
        } else {
            ptab.innerHTML = '* 通过验证';
            ptab.style.color = '#0a0';
            return true;
        }
    }

    // 验证密码
    function checkRepass() {
        var pass = document.myform.pass.value;
        var repass = document.myform.repass.value;
        var rptab = document.getElementById('rptab');
        if (pass !== repass) {
            rptab.innerHTML = '* 两次密码输入不一致';
            rptab.style.color = '#f00';
            return false;
        } else {
            rptab.innerHTML = '* 通过验证';
            rptab.style.color = '#0a0';
            return true;
        }
    }

    // 提交验证
    function checkForm() {
        return checkTel() && checkName() && checkPass() && checkRepass();
    }


     $(function () {
        $('#user-doCreate-submit').click(function () {
            var info = $('#Modals-form').serialize();

        $.ajax({
            type: 'post',
            data: info,
            url: $('#user-doCreate-submit').attr('url'),
            success: function (data) {
                if (data == 1) {
                    toastr.success("新增成功");
                    location = location;
                } else {
                    console.log(data);
                    toastr.error("新增失败，请重试");
                }
            },
            error: function () {
                toastr.error("出现错误，请重试");
            }
            });
        });
    });

</script>